<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue';
import type { Ref } from 'vue';
import { Login } from '../../utils/types';
const flag: Ref<boolean> = ref(true);
const flag2: Ref<boolean> = ref(true);
let time = ref(60);
const btnSwitch = () => {
  flag.value = !flag.value;
};

const subPhone = () => {
  flag2.value = !flag2.value;
  let timer = setInterval(() => {
    if (time.value > 0) {
      time.value--;
    } else {
      clearInterval(timer);
      flag2.value = !flag2.value;
    }
  }, 1000);
};

const login = () => {
  uni.switchTab({
    url: '/pages/index/home/home',
  });
};

const form = reactive(new Login());
</script>

<template>
  <view class="form">
    <view class="logo" v-show="flag">
      <image src="/static/sim.svg" mode=""></image>
    </view>
    <view :class="{ login: true, 'slide-up': !flag }">
      <h2 class="form_title" @click="btnSwitch">登录</h2>
      <view class="form_holder">
        <tui-input label="学号" placeholder="请输入学号" clearable type="number" maxlength="10" v-model="form.loginForm.username" backgroundColor="#f8f8f8"></tui-input>
        <tui-input label="密码" placeholder="请输入密码" clearable password v-model="form.loginForm.password" backgroundColor="#f8f8f8"> </tui-input>
      </view>
      <button class="submit-btn" @click="login">登录</button>
    </view>
    <view :class="{ signup: true, 'slide-up': flag }">
      <view class="center">
        <h2 class="center_title" @click="btnSwitch" v-if="flag">注册</h2>

        <h2 @click="btnSwitch" v-else>去登录</h2>

        <view class="form_holder">
          <tui-input label="学号" placeholder="请输入学号" clearable type="number" maxlength="10" backgroundColor="#f8f8f8"></tui-input>
          <tui-input label="密码" placeholder="请输入密码" clearable password backgroundColor="#f8f8f8"></tui-input>
          <tui-input label="手机" placeholder="请输入手机号" clearable type="number" maxlength="11" backgroundColor="#f8f8f8"></tui-input>
          <tui-input label="验证码" placeholder="请输入验证码" type="number" maxlength="6" backgroundColor="#f8f8f8">
            <template #right>
              <view @click="subPhone" v-if="flag2">发送</view>
              <view v-else>{{ time }}s</view>
            </template>
          </tui-input>
        </view>
        <button class="submit-btn">注册</button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.form {
  position: absolute;
  height: 100vh;
  width: 100vw;
  .logo {
    width: 150rpx;
    height: 150rpx;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    padding: 20rpx;
    animation: an-logo 2s;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    z-index: 5;
    transition: all 0.3s ease;
    @include flex-column();
  }

  .signup {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-top-left-radius: 100rpx;
    border-top-right-radius: 100rpx;
    z-index: 5;
    transition: all 0.3s ease;
    @include flex-column();

    .center {
      transition: all 0.3s ease;
      @include flex-column();
    }
  }

  &_holder {
    border-radius: 15rpx;
    overflow: hidden;
    margin-top: 50rpx;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
  }
}
.form .signup.slide-up {
  top: 90vh;
  transition: all 0.3s ease;
  background-color: $bgcolor;
  color: #fff;
}

.form .signup.slide-up .form_holder,
.form .signup.slide-up .submit-btn {
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}
.submit-btn {
  background-color: $bgcolor;
  color: #fff;
  border: 0;
  border-radius: 20rpx;
  display: block;
  margin: 25rpx auto;
  padding: 15rpx 45rpx;
  width: 100%;
  font-size: 30rpx;
  font-weight: bold;
  cursor: pointer;
}


@keyframes an-logo {
  0% {
    top: 0%;
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
    box-shadow: 6rpx 6rpx 10rpx -1rpx rgba(0, 0, 0, 0.15), -6rpx -6rpx 10rpx -1rpx rgba(255, 255, 255, 0.7);
  }
}
</style>
